<template>
  <div class="notice-container" v-if="['/user-center/user-notice','/user-center/user-notice/'].includes($route.fullPath)">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/user-center' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/user-center/user-notice' }">通知中心</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="notice-list-card">
        <el-row class="notice-list" v-if="noticeList.list.length !=0">
          <el-col :span="24" class="notice-item" v-for="item in noticeList.list" :key="item.id">
            <div>
              <div class="notice-header">
                <span class="notice-category font-size">{{ item.title }}</span>
              </div>
              <div>
                <i class="el-icon-time"></i>
                <span class="notice-time font-size" style="font-size: 12px;color: #666666;">{{ item.create_time }}</span>
              </div>
<!--              <div>{{ item.content.replace(/<.*?>/ig,"").substring(0,15) }}</div>-->
              <div class="right-arrow" @click="viewDetails(item)">→</div>
            </div>
          </el-col>
        </el-row>

      <div v-else style="height:760px;display: flex;justify-content: center;align-items: center;">
        <el-col style="display: flex;justify-content: center;width: 100%;align-items: center;">
          <div class="empty-box">
            <img class="empty-img" src="/img/404-images/empty.png" alt="暂无内容">
<!--            <div style="color: #d2e9ff;">数据暂无</div>-->
          </div>
        </el-col>
      </div>
    </el-card>
  </div>

  <router-view :nowNotice="nowNotice.list"></router-view>
</template>

<script setup>
import { reactive, ref,onMounted,getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import {noticeListApi} from '@/axios/userRequest'
const router = useRouter()
let {proxy} = getCurrentInstance()

let noticeList = reactive({
  list:[]
})
let nowNotice = ref({})
const viewDetails = (item)=>{
  router.push(`/user-center/user-notice/${item.id}`)
  nowNotice.value = item
  localStorage.setItem('noticeData',JSON.stringify(item))
}

let init = async ()=>{
  try {
    let {data,code,msg} = await noticeListApi()
    if(code != 1) return proxy.$message.error(msg)
    noticeList.list = data
  }catch (e) {
    console.log(e)
  }
}

onMounted(()=>{
  init()
})

</script>

<style lang="less" scoped>
.notice-container{
  .notice-list-card {
    margin-top: 12px;
    //border-radius: 52px 12px 12px;
    .notice-list {
      .notice-item {
        color: #707070;
        padding: 30px 0;
        border-bottom: 1px solid #F4F4F4;
        position: relative;
        .el-icon-time{
          vertical-align: middle;
          margin-right: 3px;
          font-size: 12px;
        }
        .notice-header {
          font-size: 12px;
          margin-bottom: 20px;
          display: flex;
          color: #222222;
          .notice-category{
            font-weight: 600;
            color: @subtitle;
          }
          .notice-time {
            margin-right: 50px;
          }
        }

        .right-arrow {
          position: absolute;
          right: 0;
          top: 60%;
          font-size: 32px;
          cursor: pointer;
        }
      }
    }
  }

  .font-size{
    font-size:18px;
  }
}
</style>
